.wMax {
    max-width: 1920px;
    min-width: 1366px;
    margin: auto;
}
.el-progress-circle__track{stroke: #32456E;}
.el-progress .el-progress-bar__outer{
    background-color: #32456E;
}
/**
*max-width:1920px;min-width:1366px;
*font-size  
*/
$fs_30:calc(24px + (30 - 24) * (100vw - 1366px) / (1920 - 1366));
$fs_30a:calc(20px + (30 - 20) * (100vw - 1366px) / (1920 - 1366));
$fs_24:calc(16px + (24 - 16) * (100vw - 1366px) / (1920 - 1366));
$fs_20:calc(16px + (20 - 16) * (100vw - 1366px) / (1920 - 1366));
$fs_18:calc(13px + (18 - 13) * (100vw - 1366px) / (1920 - 1366));
$fs_16:calc(14px + (16 - 14) * (100vw - 1366px) / (1920 - 1366));
$fs_14:calc(12px + (14 - 12) * (100vw - 1366px) / (1920 - 1366));

%ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.c-title {
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    background-color: #263F71;
    font-size: $fs_20;
    font-weight: bold;
    margin: 10px 0 4px;

    .recently {
        font-size: 12px;
        font-weight: bold;
        color: #6FCBF6;
        margin-left: 10px;
    }

    .el-select {
        width: 95px;
        margin-right: 10px;

        .el-input__inner {
            color: #6f82ba;
            font-size: $fs_16;
            background-color: transparent;
            border: none;
        }

        .el-input .el-select__caret {
            color: #6f82ba;
        }

        .el-icon-arrow-up:before {
            content: "\E78F";
        }

    }
    .el-select-dropdown__item {
        cursor: pointer;
    }
}



.bgc1 {
    background-color: #16294E;
}

.no-data-tips {
    position: relative;
    top: 50%;
    text-align: center;
    font-size: 12px;
    color: #999;
}

.circle {

    .circle-l,
    .circle-r {
        display: inline-block;
        width: 50%;
        height: 100%;
        text-align: center;
    }

    .el-progress-circle {
        width: calc(88px + (140 - 88) * (100vw - 1366px) / (1920 - 1366)) !important;
        height: calc(88px + (140 - 88) * (100vw - 1366px) / (1920 - 1366)) !important;
    }

    .el-progress__text {
        font-size: $fs_30a !important;
    }

    .circle-l .el-progress__text {
        color: #08DBFF;
    }

    .circle-r .el-progress__text {
        color: #FF46CE;
    }

    .container {
        display: inline-block;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }

    .data {
        margin: 0 0 4px;
    }

    .title {
        font-size: $fs_18;
        color: #fff;
        line-height: 24px;
    }
}

.common-census {
    display: inline-block;
    width: 652/1864 * 100%;

    .census {
        height: 90px;

        li {
            width: 20%;
            float: left;

            span {
                display: block;
                text-align: center;
            }

            .app-sum {
                font-size: $fs_30;
                font-weight: bold;
                color: #73BAFF;
                margin: 24px 0 18px;
            }

            .app-name {
                font-size: $fs_16;
                font-weight: 500;
                color: #fff;
            }
        }
    }

    .ratio {
        height: 219px;

        // .el-progress__text {
        //     font-size: $fs_30 !important;
        // }

        // .data {
        //     margin: 25px 0 20px;
        // }

        .circle-l {
            width: 33.33%;
        }
    }
}

.sampling {
    box-sizing: border-box;
    padding: 18px 20px;

    li {
        padding-bottom: 14px;

        p {
            padding-bottom: 5px;
        }

        .percent-name,
        .percentage {
            font-size: $fs_14;
            color: #fff;
            line-height: 16px;
        }

        .el-progress-bar__inner {
            background-color: #3A73EB;
        }

        .el-progress-bar__outer,
        .el-progress-bar__inner {
            border-radius: 0;
        }
    }

    .tips {
        padding-top: 46px;

        p {
            color: #6F82BA;
            font-size: 12px;
            line-height: 20px;
        }
    }
}

.carousel-item {
    box-sizing: border-box;
    height: 100%;
    padding: 22px 20px;

    .box {
        background-color: #32456E;
        height: 60px;
        padding: 10px;

        img {
            display: inline-block;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            float: left;
        }

        .info {
            width: calc(100% - 54px);
            padding-left: 10px;
            float: left;

            .title1 {
                line-height: 24px;
                font-size: $fs_16;
                color: #73D6FF;
            }

            .title2 {
                display: inline-block;
                max-width: 156px;
                line-height: 24px;
                font-size: $fs_14;
                color: #fff;
                @extend %ellipsis;
            }
        }
    }

    .time-box {
        font-size: $fs_14;
        height: 16px;
        line-height: 16px;
        color: #73BAFF;
        padding-top: 10px;
        span{
            display: inline-block;
            max-width: 180px;
            @extend %ellipsis;
        }
    }
}

.top-list {
    padding: 5px 10px;
    box-sizing: border-box;

    li {
        height: 66px;
        background-color: #32456E;
        box-sizing: border-box;
        padding: 14/239 * 100% 0 0 30/239 * 100%;
        margin: 12px 0;

        img {
            display: inline-block;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            float: left;
        }

        .info {
            width: calc(100% - 54px);
            padding-left: 10px;
            float: left;

            .title1 {
                display: inline-block;
                width: 106px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                line-height: 24px;
                font-size: $fs_14;
                color: #73D6FF;
            }

            .title2 {
                line-height: 24px;
                font-size: 12px;
                color: #fff;
                @extend %ellipsis;
            }
        }
    }
}

// data-home.vue  START
.data-home {
    .data-home-l {
        display: inline-block;
        width: 403/1864 * 100%;
        overflow: hidden;

        .count-details {
            height: 90px;
            li {
                width: 25%;
                float: left;

                span {
                    display: block;
                    text-align: center;
                }

                .app-sum {
                    font-size: $fs_30;
                    font-weight: bold;
                    color: #73BAFF;
                    // line-height: 55px;
                    margin: 24px 0 18px;
                }

                .app-name {
                    font-size: $fs_16;
                    font-weight: 500;
                    color: #fff;
                }
            }
        }

        .visits-map {
            height: 219px;
        }

        .percent-map {
            height: 260px;
            box-sizing: border-box;
            padding: 18px 20px;

            li {
                padding-bottom: 14px;

                p {
                    padding-bottom: 5px;
                }

                .percent-name,
                .percentage {
                    font-size: $fs_14;
                    color: #fff;
                    line-height: 16px;
                }

                .el-progress-bar__inner {
                    background-color: #3A73EB;
                }

                .el-progress-bar__outer,
                .el-progress-bar__inner {
                    border-radius: 0;
                }
            }
        }
    }
    .new-resource{
        height: 146px;;
    }
    .data-home-m {
        display: inline-block;
        width: 1002/1864 * 100%;
        margin: 0 28/1864 * 100%;
        overflow: hidden;

        .general-view {
            height: 722px;

            h2 {
                line-height: 40px;
                color: #fff;
                font-size: $fs_20;
                font-weight: bold;
                padding: 10px 0 0 40px;
                position: relative;

                &::before {
                    content: "";
                    position: absolute;
                    top: 16px;
                    left: 22px;
                    display: inline-block;
                    border-left: 5px solid #73BAFF;
                    height: 30px;
                }
            }

            .general-map-box {
                height: calc(100% - 100px);
            }

            .date-string {
                font-size: $fs_18;
                font-weight: bold;
                color: rgba(115, 211, 255, 1);
                line-height: 40px;
                height: 40px;
                padding: 0 22px 10px 0;
                text-align: end;
            }
        }


        .count-details-l {
            height: 146px;
            li {
                width: 10%;
                float: left;

                span {
                    display: block;
                    text-align: center;
                }

                .app-sum {
                    font-size: $fs_24;
                    font-weight: bold;
                    color: #73BAFF;
                    margin: 24px 0 14px;
                }

                .app-name {
                    font-size: $fs_16;
                    font-weight: 500;
                    color: #fff;
                }
            }
        }
    }

    .data-home-r {
        display: inline-block;
        width: 403/1864 * 100%;
        overflow: hidden;

        .users-count {
            height: 90px;

            li {
                width: 33.33%;
                float: left;

                span {
                    display: block;
                    text-align: center;
                }

                .app-sum {
                    font-size: $fs_30;
                    font-weight: bold;
                    color: #73BAFF;
                    // line-height: 55px;
                    margin: 24px 0 18px;
                }

                .app-name {
                    font-size: $fs_16;
                    font-weight: 500;
                    color: #fff;
                }
            }
        }

        .gender-map {
            height: 219px;


        }

        .homeWork-map {
            height: 260px;
        }

        .bulletin {
            height: 146px;
            box-sizing: border-box;
            padding: 0 20px;
            li {
                line-height: 12px;
                padding: 12px 0;

                .reason {
                    font-size: $fs_14;
                    color: #fff;
                    width: 70%;
                    @extend %ellipsis;
                }

                .date {
                    font-size: $fs_14;
                    color: #73BAFF;
                    text-align: end;
                    width: 30%;
                    @extend %ellipsis;
                }
            }
        }
    }
}

// data-home.vue  END




// data-user.vue  START
.data-users {
    .user-count-box {
        display: inline-block;
        min-width: 403/1864 * 100%;

        .user-count {
            height: 90px;

            li {
                width: 33.33%;
                float: left;

                span {
                    display: block;
                    text-align: center;
                }

                .app-sum {
                    font-size: $fs_30;
                    font-weight: bold;
                    color: #73BAFF;
                    // line-height: 55px;
                    margin: 24px 0 18px;
                }

                .app-name {
                    font-size: $fs_16;
                    font-weight: 500;
                    color: #fff;
                }
            }
        }

        .sex-analysis {
            height: 219px;
        }
    }

    .lively-users {
        display: inline-block;
        width: 1433/1864 * 100%;
        margin-left: 28/1864 * 100%;

        .lively-map {
            height: 363px;
        }

    }

    .platform-user {
        display: inline-block;
        width: 1433/1864 * 100%;
        margin-right: 28/1864 * 100%;

        .user-map {
            height: 460px;
        }
    }

    .others-box {
        display: inline-block;
        min-width: 403/1864 * 100%;

        .statistics {
            height: 260px;

        }

        .new-users {
            height: 146px;
        }
    }

}

// data-user.vue  END



// data-resource.vue  START
.data-resource {
    .census li{
        width: 25%;
    }
    .download-count {
        display: inline-block;
        width: 1184/1864 * 100%;
        margin-left: 28/1864 * 100%;

        .download-map {
            height: 363px;
        }
    }

    .upload-count {
        display: inline-block;
        width: 1184/1864 * 100%;
        margin-right: 28/1864 * 100%;

        .upload-map {
            height: 414px;
        }
    }

    .other-resource {
        display: inline-block;
        width: 403/1864 * 100%;
        margin-right: 10/1864 * 100%;

        .resource-scale {
            height: 240px;
        }

        .latest-upload {
            height: 120px;
            img {
                border-radius: 0;
                object-fit: fill;
            }
        }
    }

    .resource-carousel {
        .carousel-item {
            padding: 18px 20px 22px;

            .box {
                height: 42px;
            }
        }
    }

    .top-upload {
        display: inline-block;
        width: 239/1864 * 100%;

        .upload-list {
            height: 414px;
        }
    }
    .ratio .circle-l{
        width: 25%;
    }
}

// data-resource.vue  END


// data-app.vue  START
.data-app {
    .app-census {
        .circle-l {
            width: 20%;
            .el-progress__text{
                font-size: $fs_24!important;
            }
        }
    }

    .el-progress-circle {
        width: calc(88px + (105 - 88) * (100vw - 1366px) / (1920 - 1366)) !important;
        height: calc(88px + (105 - 88) * (100vw - 1366px) / (1920 - 1366)) !important;
    }

    .app-visit {
        display: inline-block;
        width: 1184/1864 * 100%;
        margin-left: 28/1864 * 100%;

        .visit-map {
            height: 363px;
        }
    }



    .single-app-visit {
        display: inline-block;
        width: 1597/1864 * 100%;
        margin-right: 28/1864 * 100%;

        .single-visit-map {
            height: 414px;
        }
    }

    .visit-top {
        display: inline-block;
        width: 239/1864 * 100%;

        .visit-top-list {
            height: 414px;
            overflow: hidden;

            ul {
                padding: 5px 10px;
                box-sizing: border-box;
            }

            li {
                height: 66px;
                margin: 12px 0;

                .visit-item {
                    padding: 10px;
                    background-color: #32456E;
                }

                .visiter {
                    line-height: 24px;
                    font-size: $fs_16;
                    color: #73D6FF;
                    @extend %ellipsis;
                }

                .count {
                    line-height: 24px;
                    font-size: $fs_14;
                    color: #fff;
                    @extend %ellipsis;
                }
            }
        }
    }
}

// data-app.vue  END

// data-activities.vue  start
.data-activities {
    .activities-box {
        .circle-l {
            width: 25%;
        }
    }

    .task-count {
        display: inline-block;
        width: 1184/1864 * 100%;
        margin-left: 28/1864 * 100%;

        .task-map {
            height: 363px;
        }
    }

    .homework {
        display: inline-block;
        width: 1184/1864 * 100%;
        margin-right: 28/1864 * 100%;

        .homework-map {
            height: 414px;
        }
    }

    .ranking {
        display: inline-block;
        width: 403/1864 * 100%;
        margin-right: 10/1864 * 100%;

        .teacher-ranking {
            height: 414px;
            position: relative;
            .tips{
                position: absolute;
                left: 20px;
                bottom: 20px;
            }
        }
    }

    .top-join {
        display: inline-block;
        width: 239/1864 * 100%;

        .top-join-list {
            height: 414px;
        }
    }
}